import { SearchPanel } from './serarch-panel';
import List from './list';
import { useState } from 'react';
import { useDebounce, useDocumentTitle } from '../../utils/index';
import styled from '@emotion/styled';
import { Button, Col, Row, Typography } from 'antd';
import { useProjects } from 'utils/project';
import { useUer } from 'utils/user';
import { Helmet } from 'react-helmet';
import { useUrlQueryParam } from 'utils/url';
import { useProjectSeachParam } from './util';
import { ButtonNoPadding } from 'components/lib';
import { useDispatch } from 'react-redux';
import { projectListAcitons } from 'store/project-list.slice';

export const ProjectListScreen = () => {
  //基本类型、组件状态可以放到依赖里，非组件状态的对象绝不可以放到依赖里
  useDocumentTitle('项目列表', false);
  const [param, setParam] = useProjectSeachParam();
  const {
    isLoading,
    error,
    data: list,
    retry,
  } = useProjects(useDebounce(param, 2000));
  const { data: users } = useUer();
  const dispatch = useDispatch();
  return (
    <Container>
      {/* <Helmet>
        <title>项目列表</title>
      </Helmet> */}
      <Row justify="space-between">
        <h2>项目列表</h2>
        <ButtonNoPadding
          onClick={() => dispatch(projectListAcitons.openProjectModal())}
          type="link"
        >
          创建项目
        </ButtonNoPadding>
      </Row>
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      {error ? (
        <Typography.Text type={'danger'}>{error.message} </Typography.Text>
      ) : null}
      <List
        refresh={retry}
        loading={isLoading}
        users={users || []}
        dataSource={list || []}
      />
    </Container>
  );
};
ProjectListScreen.whyDidYouRender = false;
const Container = styled.div`
  padding: 3.2rem;
`;
